<template>
    <!--文本框-->
    <el-input v-if="column.type === 'text'" v-model.trim="searchParam[column.prop]" v-bind="columnAttrs" />
    <!--数值框-->
    <el-input-number v-if="column.type === 'number'" v-model.trim="searchParam[column.prop]" controls-position="right" v-bind="columnAttrs" />
    <!--普通下拉框-->
    <el-select v-else-if="column.type === 'select'" v-model="searchParam[column.prop]" v-bind="columnAttrs">
        <el-option v-for="col in column.options" :label="col[column.optionLabel || 'label']"
            :value="col[column.optionValue || 'value']" />
    </el-select>
    <!--枚举下拉框-->
    <el-select v-else-if="column.type === 'enum'" v-model="searchParam[column.prop]" v-bind="columnAttrs">
        <el-option v-for="(value, key) in column.options" :label="value" :value="key" :key="key" />
    </el-select>
    <!--是否下拉框-->
    <el-select v-else-if="column.type === 'boolean'" v-model="searchParam[column.prop]" v-bind="columnAttrs">
        <el-option v-for="col in booleanList" :label="col.label" :value="col.value" />
    </el-select>
    <!--日期选择-->
    <el-date-picker v-else-if="column.type === 'date'" v-model="searchParam[column.prop]" :type="column.pickerType"
        v-bind="columnAttrs" />
    <!--插槽-->
    <slot v-else-if="column.type === 'slot'"></slot>
    <el-input v-else v-model.trim="searchParam[column.prop]" v-bind="columnAttrs" />
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { ColumnProps } from '../interface/index'
import { booleanList } from '@/enums/index'

interface SearchFormItem {
    column: ColumnProps;
    searchParam: { [key: string]: any };
}
const props = defineProps<SearchFormItem>();

const disallowedAttrs = ["prop", "label", "type", "options", "optionLabel", "optionValue", "pickerType", "span", "tooltip", "labelWidth"]; //排除不需要或冲突属性
const columnAttrs = computed(() => {
    const attrs = {};
    for (const key in props.column) {
        if (!disallowedAttrs.includes(key) && props.column[key] !== undefined) {
            attrs[key] = props.column[key];
        }
    }
    return attrs;
});
</script>